<template>
  <div class="box">
    <!-- 头部搜索模块 -->
    <headerSearch :selectObj="selectObject" :isShowAdd="menuFlag" :rowInfo="rowInfo"  :goSearchFc="searchClick" :addFun="add"/>
    <!-- 中间表格模块 -->
    <BaseTable :data="cargotableData" :columns="cargotableDataColumns" :tableHeight="tableHeight" :pagination="false" :loading="loading"></BaseTable>

    <div class="page">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="startpage" :page-sizes="[10, 15, 20, 25, 30]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
    </div>
    <div class="leftbox">
      <el-drawer :before-close="handleClose" :title="flag ? '新增驳船信息' : '编辑驳船信息'" :visible.sync="drawer" direction="rtl" size="80%">
        <el-form :rules="basisRules" ref="basisRulesRef" size="small" :model="form">
          <el-tabs v-model="aciveName" @tab-click="handleTabsClick">
            <el-tab-pane label="基本信息" name="first" style="padding:0 20px">
              <el-row>
				<el-col :span="8">
				  <el-form-item label="中文船名" prop="nameCn" :label-width="formLabelWidth" style="position: relative">
				    <el-input @input="form.nameCn = verifyfilter('char', form.nameCn)"  v-model="form.nameCn" autocomplete="off" @blur="sjmCreated(form.nameCn)"></el-input>
<!--					  <div style="font-size: 12px;margin: 0;padding: 0;color: #F56C6C;position: absolute;bottom: -25px" v-if="responseNameb">存在相似船名</div>-->
				  </el-form-item>
				</el-col>
				<el-col :span="8">
				  <el-form-item label="船舶识别号" :label-width="formLabelWidth" >
				    <el-input v-model="form.bargeNo"></el-input>
				  </el-form-item>
				</el-col>
				<el-col :span="8">
				  <el-form-item label="船长电话"  :label-width="formLabelWidth" prop="captainPhone">
				    <el-input @input="
				      form.captainPhone = verifyfilter('digit', form.captainPhone)
				    " v-model="form.captainPhone" autocomplete="off"></el-input>
				  </el-form-item>
				</el-col>
			</el-row>
			<el-row>
			  <el-col :span="8">
			    <el-form-item label="速记码"  :label-width="formLabelWidth">
			      <el-input @input="form.shortCode = verifyfilter('latin', form.shortCode)" v-model="form.shortCode" autocomplete="off"></el-input>
			    </el-form-item>
			  </el-col>
			  <el-col :span="8">
			    <el-form-item label="呼号" :label-width="formLabelWidth" >
			      <el-input @input="form.callNo = verifyfilter('digit', form.callNo)" v-model="form.callNo" autocomplete="off"></el-input>
			    </el-form-item>
			  </el-col>
			  <el-col :span="8">
			    <el-form-item label="净吨" :label-width="formLabelWidth" prop="netTon">
			      <el-input @input="form.netTon = verifyfilter('digit', form.netTon)" v-model="form.netTon" autocomplete="off"></el-input>
			    </el-form-item>
			  </el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="船长(米)"  :label-width="formLabelWidth"  prop="shipLength">
					  <el-input @input="
						form.shipLength = verifyfilter('digit', form.shipLength)
					  " v-model="form.shipLength" autocomplete="off"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
				  <el-form-item label="船宽"  :label-width="formLabelWidth">
				    <el-input @input="form.shipWidth = verifyfilter('digit', form.shipWidth)" v-model="form.shipWidth" autocomplete="off"></el-input>
				  </el-form-item>
				</el-col>
				<el-col :span="8">
				  <el-form-item label="型深" :label-width="formLabelWidth">
				    <el-input @input="
				  form.mouldedDepth = verifyfilter('digit', form.mouldedDepth)
				" v-model="form.mouldedDepth" autocomplete="off"></el-input>
				  </el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="船高" :label-width="formLabelWidth">
					    <el-input @input="
					  form.shipHeight = verifyfilter('digit', form.shipHeight)
					" v-model="form.shipHeight" autocomplete="off"></el-input>
					  </el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="空载吃水" :label-width="formLabelWidth">
					    <el-input @input="
					  form.unloadedDraft = verifyfilter('digit', form.unloadedDraft)
					" v-model="form.unloadedDraft" autocomplete="off"></el-input>
					  </el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="满载吃水" :label-width="formLabelWidth">
					    <el-input @input="
					  form.fullloadWater = verifyfilter('digit', form.fullloadWater)
					" v-model="form.fullloadWater" autocomplete="off"></el-input>
					  </el-form-item>
				</el-col>
			</el-row>
			  <el-row>
			  	<el-col :span="8">
			  		<el-form-item label="结构型式" :label-width="formLabelWidth">
			  		  <el-input v-model="form.structureType"></el-input>
			  		</el-form-item>
			  	</el-col>
			  	<el-col :span="8">
			  		<el-form-item label="航区" :label-width="formLabelWidth">
			  		  <el-select clearable v-model="form.navigatingZone" placeholder="选择航区" style="width:100%">
			  		    <el-option v-for="item in navigatingZoneList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
			  		  </el-select>
			  		</el-form-item>
			  	</el-col>
			  	<el-col :span="8">
			  		<el-form-item label="船体材质" :label-width="formLabelWidth">
			  		  <el-input v-model="form.shipMaterial"></el-input>
			  		</el-form-item>
			  	</el-col>
			  </el-row>
			  <el-row>
			  	<el-col :span="8">
			  		<el-form-item label="货舱数量" :label-width="formLabelWidth">
			  		  <el-input v-model="form.hatchNo" @input="form.hatchNo= verifyfilter('cangcont', form.hatchNo)"></el-input>
			  		</el-form-item>
			  	</el-col>
			  	<el-col :span="8">
			  		<el-form-item label="货舱盖型式" :label-width="formLabelWidth">
			  		  <el-input v-model="form.siloCoverCode"></el-input>
			  		</el-form-item>
			  	</el-col>
			  	<el-col :span="8">
			  		<el-form-item label="水密横舱壁数" :label-width="formLabelWidth">
			  		  <el-input v-model="form.bulkhead"></el-input>
			  		</el-form-item>
			  	</el-col>
			  </el-row>
			  <el-row>
			  	<el-col :span="8">
			  		<el-form-item label="参考载货量" :label-width="formLabelWidth">
			  		  <el-input v-model="form.referenceCapacity"></el-input>
			  		</el-form-item>
			  	</el-col>
			  	<el-col :span="8">
			  		<el-form-item label="强力甲板材料" :label-width="formLabelWidth">
			  		  <el-input v-model="form.deckMaterial"></el-input>
			  		</el-form-item>
			  	</el-col>
			  	<el-col :span="8">
			  		<el-form-item label="强力甲板位置" :label-width="formLabelWidth">
			  		  <el-input v-model="form.deckPosition"></el-input>
			  		</el-form-item>
			  	</el-col>
			  </el-row>
			  <el-row>
			  	<el-col :span="8">
			  		<el-form-item label="双层底位置" :label-width="formLabelWidth">
			  		  <el-input v-model="form.doubleBottomPosition"></el-input>
			  		</el-form-item>
			  	</el-col>
			  	<el-col :span="8">
			  		<el-form-item label="防撞边舱位置" :label-width="formLabelWidth">
			  		  <el-input v-model="form.anticollisionPosition"></el-input>
			  		</el-form-item>
			  	</el-col>
			  	<el-col :span="8">
			  		<el-form-item label="抗沉性" :label-width="formLabelWidth">
			  		  <el-input v-model="form.unsinkability"></el-input>
			  		</el-form-item>
			  	</el-col>
			  </el-row>
			  <el-row>
			  	<el-col :span="8">
			  		<el-form-item label="船舶经营人" :label-width="formLabelWidth">
			  		  <el-select style="width:100%" v-model="form.shipCompanyCode" placeholder="请选择船舶经营人" clearable>
			  		    <el-option v-for="item in boatcompData" :key="item.companyTypeCode" :label="item.fullName" :value="item.id"></el-option>
			  		  </el-select>
			  		</el-form-item>
			  	</el-col>
			  	<el-col :span="8">
			  		<el-form-item label="船舶所有人" :label-width="formLabelWidth">
			  		  <el-select style="width:100%" v-model="form.shipOwnerCode" placeholder="请选择船舶所有人" clearable>
			  		    <el-option v-for="item in boatMianData" :key="item.fullName" :label="item.fullName" :value="item.id"></el-option>
			  		  </el-select>
			  		</el-form-item>
			  	</el-col>
			  	<el-col :span="8">
			  		<el-form-item label="船籍代码" :label-width="formLabelWidth">
			  		  <el-select style="width:100%" v-model="form.shipNationCode" placeholder="请选择船籍代码" clearable>
			  		    <el-option v-for="item in nationData" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
			  		  </el-select>
			  		</el-form-item>
			  	</el-col>
			  </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="载重吨" :label-width="formLabelWidth">
                    <el-input @input="form.weightTon = verifyfilter('digit', form.weightTon)" v-model="form.weightTon" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
          				<el-col :span="8">
          				  <el-form-item label="船舶自重" :label-width="formLabelWidth">
          				    <el-input @input="form.deadWeight = verifyfilter('digit', form.deadWeight)" v-model="form.deadWeight" autocomplete="off"></el-input>
          				  </el-form-item>
          				</el-col>
          				<el-col :span="8">
          				  <el-form-item label="总吨" prop="totalTon" :label-width="formLabelWidth">
                        <el-input @input="form.totalTon = verifyfilter('digit', form.totalTon)" v-model="form.totalTon" autocomplete="off"></el-input>
                      </el-form-item>
          				</el-col>
             </el-row>

         <el-row>
            <el-col :span="8">
              <el-form-item label="总长" :label-width="formLabelWidth">
              <el-input @input="form.totalLength = verifyfilter('digit', form.totalLength)" v-model="form.totalLength" autocomplete="off"></el-input>
            </el-form-item>
           </el-col>
            <el-col :span="8">
              <el-form-item label="满载水线长" :label-width="formLabelWidth">
                <el-input @input="form.fullyLoadedWaterlineLength = verifyfilter('digit', form.fullyLoadedWaterlineLength)" v-model="form.fullyLoadedWaterlineLength" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最大船宽" :label-width="formLabelWidth">
                <el-input @input="form.maximumShipWidth = verifyfilter('digit', form.maximumShipWidth)" v-model="form.maximumShipWidth" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

         <el-row>
          <el-col :span="8">
            <el-form-item label="最大船高" :label-width="formLabelWidth">
              <el-input @input="form.maximumShipHeight = verifyfilter('digit', form.maximumShipHeight)" v-model="form.maximumShipHeight" autocomplete="off"></el-input>
            </el-form-item>
         </el-col>
          <el-col :span="8">
            <el-form-item label="满载排水量" :label-width="formLabelWidth">
              <el-input @input="form.fullLoadDisplacement = verifyfilter('digit', form.fullLoadDisplacement)" v-model="form.fullLoadDisplacement" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="空载排水量" :label-width="formLabelWidth">
              <el-input @input="form.noLoadDisplacement = verifyfilter('digit', form.noLoadDisplacement)" v-model="form.noLoadDisplacement" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

            </el-tab-pane>
            <el-tab-pane label="其他信息" name="second" style="padding:0 20px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="型高" :label-width="formLabelWidth">
                    <el-input @input="
                  form.mouldedHeight = verifyfilter('digit', form.mouldedHeight)
                " v-model="form.mouldedHeight" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
				<el-col :span="8">
				  <el-form-item label="舱数" :label-width="formLabelWidth">
				    <el-input @input="form.cabinNum = verifyfilter('cangcont', form.cabinNum)" v-model="form.cabinNum" autocomplete="off"></el-input>
				  </el-form-item>
				</el-col>
				<el-col :span="8">
				  <el-form-item label="最大船速" :label-width="formLabelWidth">
				    <el-input @input="form.topSpeed = verifyfilter('digit', form.topSpeed)" v-model="form.topSpeed" autocomplete="off"></el-input>
				  </el-form-item>
				</el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <el-form-item label="航速" :label-width="formLabelWidth">
                    <el-input @input="form.shipSpeed = verifyfilter('digit', form.shipSpeed)" v-model="form.shipSpeed" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
				<el-col :span="8">
				  <el-form-item label="船检登记号" :label-width="formLabelWidth">
				    <el-input v-model="form.shipRegisterNo"></el-input>
				  </el-form-item>
				</el-col>
				<el-col :span="8">
				  <el-form-item label="进水角位置" :label-width="formLabelWidth">
				    <el-input v-model="form.entranceAnglePosition"></el-input>
				  </el-form-item>
				</el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <el-form-item label="建造年月" :label-width="formLabelWidth">
                    <el-date-picker style="width:100%" v-model="form.buildDate" type="month" placeholder="请选择" format="yyyy-MM" value-format="yyyy-MM"></el-date-picker>
                  </el-form-item>
                </el-col>
				<el-col :span="8">
				  <el-form-item label="船舶类型" :label-width="formLabelWidth">
				    <el-select clearable v-model="form.shipKindCode" placeholder="船舶类型" style="width:100%">
				      <el-option v-for="item in boatData" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
				    </el-select>
				  </el-form-item>
				</el-col>
              </el-row>
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input type="textarea" maxlength="500" show-word-limit @input="form.remark = verifyfilter('char', form.remark)" v-model="form.remark" autocomplete="off"></el-input>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-form>

        <div class="demo-drawer__footer">
          <el-button size="small" type="primary" @click="addUpdate()" :loading="loading">{{ loading ? '提交中 ...' : ( form.hsReviewStatus === '0' ? '审 核' : '保 存' ) }}</el-button>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { isObjectValueEqual } from '@/libs/date'
import BaseTable from '@/components/BaseTable'
import headerSearch from './component/headerSearch'
export default {
  name: 'metadataBarge',
  components: {
    BaseTable,
    headerSearch
  },
  data() {
    return {
      // 搜索框显示对象
      selectObject: [
        {
          name: '中文船名',
          type: 'inputVerify',
          modelName: 'nameCn',
          verifyTpye: 'char'
        },
        {
          name: '速记码',
          type: 'inputVerify',
          modelName: 'shortCode',
          verifyTpye: 'latin'
        },
        {
          name: '审核状态',
          type: 'select',
          modelName: 'hsReviewStatus',
          verifyTpye: 'latin',
          selectData: [
            {
              dictValue: '0',
              dictLabel: '未审核'
            },
            {
              dictValue: '1',
              dictLabel: '审核'
            },
            {
              dictValue: '2',
              dictLabel: '草稿'
            }
          ]
        }
      ],
      cargotableDataColumns: [
        {
          prop: 'nameCn',
          label: '中文船名'
        },
        {
          prop: 'shortCode',
          label: '速记码'
        },
        {
          prop: 'callNo',
          label: '呼号'
        },
        {
          prop: 'shipKindName',
          label: '船舶类型'
        },
        {
          prop: 'navigatingName',
          label: '航区'
        },
        {
          prop: 'unloadedDraft',
          label: '空载吃水'
        },
        {
          prop: 'fullloadWater',
          label: '满载吃水'
        },
        {
          prop: 'shipMaterial',
          label: '船体材质'
        },
        {
          prop: 'structureType',
          label: '结构型式'
        },
        {
          prop: 'siloCoverCode',
          label: '货舱盖型式'
        },
        {
          prop: 'bulkhead',
          label: '水密横舱壁数'
        },
        {
          prop: 'entranceAnglePosition',
          label: '进水角位置'
        },
        {
          prop: 'deckMaterial',
          label: '强力甲板材料'
        },
        {
          prop: 'doubleBottomPosition',
          label: '双层底位置'
        },
        {
          prop: 'unsinkability',
          label: '抗沉性'
        },
        {
          prop: 'deckPosition',
          label: '强力甲板位置'
        },
        {
          prop: 'anticollisionPosition',
          label: '防撞边舱位置'
        },
        {
          prop: 'referenceCapacity',
          label: '参考载货量'
        },
        {
          prop: 'captainPhone',
          label: '船长电话'
        },
        {
          prop: 'shipCompany',
          label: '船舶经营人'
        },
        {
          prop: 'shipOwner',
          label: '船舶所有人'
        },
        {
          prop: 'netTon',
          label: '净吨'
        },
        {
          prop: 'weightTon',
          label: '载重吨'
        },
        {
          prop: 'deadWeight',
          label: '船舶自重'
        },
        {
          prop: 'totalTon',
          label: '总吨'
        },
        {
          prop: 'buildDate',
          label: '建造年月'
        },
        {
          prop: 'shipNationName',
          label: '船籍代码'
        },
        {
          prop: 'hatchNo',
          label: '舱口数'
        },
        {
          prop: 'cabinNum',
          label: '舱数'
        },
        {
          prop: 'shipLength',
          label: '船长'
        },
        {
          prop: 'shipHeight',
          label: '船高'
        },
        {
          prop: 'shipWidth',
          label: '船宽'
        },
        {
          prop: 'topSpeed',
          label: '最大船速'
        },
        {
          prop: 'mouldedDepth',
          label: '型深'
        },
        {
          prop: 'mouldedHeight',
          label: '型高'
        },
        {
          prop: 'fullloadWater',
          label: '满载吃水'
        },
        {
          prop: 'unloadedDraft',
          label: '空载吃水'
        },
        {
          prop: 'totalLength',
          label: '总长'
        },
        {
          prop: 'fullyLoadedWaterlineLength',
          label: '满载水线长'
        },
        {
          prop: 'maximumShipWidth',
          label: '最大船宽'
        },
        {
          prop: 'maximumShipHeight',
          label: '最大船高'
        },
        {
          prop: 'fullLoadDisplacement',
          label: '满载排水量'
        },
        {
          prop: 'noLoadDisplacement',
          label: '空载排水量'
        },
        {
          prop: 'remark',
          label: '备注'
        },
        {
          prop: 'hsReviewStatus',
          label: '状态',
          fixed: 'right',
          render: (h, params) => {
            return h(
              'el-tag',
              {
                props: {
                  type:
										params.row.hsReviewStatus == '0'
										  ? 'primary'
										  : (params.row.hsReviewStatus == '1' || params.row.hsReviewStatus == null)
										    ? 'success'
										    : 'warning',
                  size: 'mini'
                } // 组件的props
              },
              params.row.hsReviewStatus == '0' ? '未审核' : (params.row.hsReviewStatus == '1' || params.row.hsReviewStatus == null) ? '已审核' : '草稿'
            )
          }
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 100,
          render: (h, params) => {
            return h('div', [
              h('el-button', {
                props: {
                  size: 'mini'
                },

                domProps: {
                  innerHTML: `<span style='color:#0B6CD6;display: ${this.menuArr.includes('驳船资料按钮修改') ? 'block' : 'none'}'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                },
                on: {
                  click: () => {
                    this.handleEdit(params.$index, params.row)
                  }
                }
              })
              // h('el-button', {
              //   props: {
              //     size: 'mini'
              //   },

              //   domProps: {
              //     innerHTML: ` <i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i>删除`
              //   },
              //   on: {
              //     click: () => {
              //       click: this.handleDelete(params.row.id)
              //     }
              //   }
              // })
            ])
          }
        }
      ],
      cargotableData: [],
      // 基础信息验证
      basisRules: {
        bargeNo: [
          {
            required: true,
            message: '船舶识别号不能为空',
            trigger: 'blur'
          }
        ],
        // totalTon: [
        //   {
        //     required: true,
        //     message: '总吨不能为空',
        //     trigger: 'blur'
        //   }
        // ],
        // captainPhone: [
        //   {
        //     required: true,
        //     message: '船长电话不能为空',
        //     trigger: 'blur'
        //   }
        // ],
        // netTon: [
        //   {
        //     required: true,
        //     message: '净吨不能为空',
        //     trigger: 'blur'
        //   }
        // ],
        // shipLength: [
        //   {
        //     required: true,
        //     message: '船长不能为空',
        //     trigger: 'blur'
        //   }
        // ],

        callNo: [
          {
            required: true,
            message: '呼号不能为空',
            trigger: 'blur'
          }
        ],
        netTon: [
          {
            required: false,
            message: '净吨不能为空',
            trigger: 'blur'
          }
        ],
        nameCn: [
          {
            required: true,
            message: '中文船名不能为空',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 50 个字符',
            trigger: 'blur'
          }
        ],
        shortCode: [
          {
            required: true,
            message: '请输入速记码',
            trigger: 'blur'
          },
          {
            min: 1,
            message: '长度在 1个字符以上',
            trigger: 'blur'
          }
        ],
        shipLength: [
          {
            required: false,
            message: '船长不能为空',
            trigger: 'blur'
          }
        ],
        shipHeight: [
          {
            required: true,
            message: '船高不能为空',
            trigger: 'blur'
          }
        ],
        shipWidth: [
          {
            required: true,
            message: '船宽不能为空',
            trigger: 'blur'
          }
        ],
        captainPhone: [
          {
            required: false,
            message: '船长电话不能为空',
            trigger: 'blur'
          },
          {
            min: 8,
            max: 11,
            message: '请输入正确的电话号码',
            trigger: 'blur'
          }
        ]
      },

      queryInfo: {
        nameCn: '',
        shortCode: '',
        imoNo: ''
      }, // 查询参数
      responseNameb: '',
      // 分页
      startpage: 1,
      totalNum: 0,
      pagesize: 15,
      flag: false,
      form: {
        nameCn: '',
        shortCode: '',
        callNo: '',
        captainPhone: '',
        shipCompany: '',
        shipCompanyCode: '',
        shipOwner: '',
        shipOwnerCode: '',
        netTon: '',
        weightTon: '',
        deadWeight: '',
        totalTon: '',
        buildDate: '',
        shipNationCode: '',
        hatchNo: '',
        cabinNum: '',
        shipLength: '',
        shipHeight: '',
        shipWidth: '',
        topSpeed: '',
        shipSpeed: '',
        mouldedDepth: '',
        mouldedHeight: '',
        fullloadWater: '',
        unloadedDraft: '',
        delFlag: '0',
        remark: '',
        totalLength: '',
        fullyLoadedWaterlineLength: '',
        maximumShipWidth: '',
        maximumShipHeight: '',
        fullLoadDisplacement: '',
        noLoadDisplacement: ''
      },
      formLabelWidth: '120px', // form的item宽度
      drawer: false, // 新增修改
      relation: false, // 关联
      loading: false,

      colpo: true, // 基本信息
      colpopo: false, // 其他信息
      nowData: {},
      boatcompData: [], // 船公司
      boatMianData: [], // 船主
      nationData: [],

      boatData: [], // 船类型
      navigatingZoneList: [], // 航区
      flagHint: false,
      aciveName: 'first',
      menuArr: [],
      menuFlag: false,
      rowInfo: null // 行信息
    }
  },
  watch: {
    form: {
      handler(newVal, oldVal) {
        console.log(isObjectValueEqual(newVal, oldVal))
        this.flagHint = isObjectValueEqual(newVal, oldVal)
      },
      deep: true
    }
  },
  async activated() {
	  var menuArr = []
	  var menuId = ''
	  if (localStorage.getItem('menuArr')) {
		  menuArr = JSON.parse(localStorage.getItem('menuArr'))
	  }
	  menuArr.map(item => {
		  item.children.map(v => {
			  if (window.location.href.includes(v.url)) {
				  menuId = v.id
			  }
		  })
	  })

	  if (menuId) {
		  this.menuArr = []
		  await this.$http.get(`/${this.$ServiceName}/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`, { timeout: 30000 })
				  .then(res => {
					  res.data.data.map(item => {
						  this.menuArr.push(item.resourceName)
					  })

					  if (!this.menuArr.includes('驳船资料按钮新增')) {
						  this.menuFlag = false
					  } else {
						  this.menuFlag = true
					  }
				  }).catch((error) => {})
	  }
    if (this.$store.state.app.searchResouce == 'menu') {
      this.queryInfo = {
        nameCn: '',
        shortCode: '',
        imoNo: ''
      }
      this.getListData()
      this.getboatmain()
      this.getboatComp()
      this.getZoneList()
    }
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight
    }
  },
  methods: {
    handleTabsClick() { },
    // 获取航区
    async getZoneList() {
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/publics/listalldict?dicttype=NAVIGATING_ZONE,ship_type,NATION`
      ).then(res => {
        this.navigatingZoneList = res.data.data.NAVIGATING_ZONE;
        this.boatData = res.data.data.ship_type;
        this.nationData = res.data.data.NATION;
      }).catch(error => {})
    },
    // 生成速记码
    async sjmCreated(val) {
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/public/autorefer?name=${val}`
      )
      this.form.shortCode = res.data.data
    },
    async checkSame(val) {
      if (this.namecnId) {
        var namecnId = this.namecnId
      } else { var namecnId = '' }

      const res = await this.$http.get(
		  `/${this.$ServiceName}/api/external/mtbargeInfo/${this.$version}/getdistinctnamecount?namecn=${val}&id=${namecnId}`
      )
      this.responseName = res.data.data
      if (this.responseName > 0) {
        return this.$message.warning('驳船名称重复，请注意~')
      }
      console.log(this.responseName)
    },
    // 船公司
    async getboatComp() {
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/public/listcustomercompany?customertype=10`
      )
      this.boatcompData = res.data.data
    },
    // 船主
    async getboatmain() {
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/public/listcustomercompany?customertype=10`
      )
      this.boatMianData = res.data.data
    },
    handleClose(done) {
      if (this.flagHint) {
        this.$confirm('您已修改了数据，确定是否关闭？')
          .then(_ => {
			  this.responseNameb = ''
			  done()
            this.$refs['basisRulesRef'].clearValidate()
          })
          .catch(_ => { })
      } else {
		  this.responseNameb = ''
		  done()
      }
    },

    // // 基本信息
    // colpoFun() {
    //   setTimeout(() => {
    //     this.colpo = !this.colpo
    //   })
    //   if (this.colpopo) {
    //     this.colpopo = false
    //   }
    // },
    // // 其他信息
    // colpopoFun() {
    //   setTimeout(() => {
    //     this.colpopo = !this.colpopo
    //   })
    //   if (this.colpo) {
    //     this.colpo = false
    //   }
    // },
    // 驳船类型事件
    // cusChange(value) {
    //   console.log(value)
    // },
    // 搜索
    searchClick(searchData) {
      this.startpage = 1
      this.queryInfo = Object.assign(this.queryInfo, searchData);
      this.getListData()
    },
    // 查询数据table
    async getListData() {
      this.loading = true
      await this.$http.get(
        `/${this.$ServiceName}/api/external/mtbargeInfo/queryall?pagesize=${this.pagesize}&startpage=${this.startpage}`,
        {
          params: this.queryInfo
        }
      ).then(res => {
        this.cargotableData = res.data.data.pages

        // this.cargotableData.map(n => {
        //   const buildDate = new Date(n.buildDate)
        //   const year = buildDate.getFullYear()
        //   let month = buildDate.getMonth() + 1
        //   if (month >= 1 && month <= 9) {
        //     month = '0' + month
        //   }
        //   n.buildDate = year + '-' + month
        // })
        this.startpage = res.data.data.pageNum
        this.pagesize = res.data.data.pageSize
        this.totalNum = res.data.data.totalNum
        this.loading = false
      }).catch(error => { this.loading = false })
    },
	  addUpdateNew() {
		  if (this.form.shipCompanyCode) {
			  this.boatcompData.forEach(v => {
				  if (v.id == this.form.shipCompanyCode) {
					  this.form.shipCompany = v.fullName
				  }
			  })
		  } else {
			  this.form.shipCompany = ''
		  }

		  if (this.form.shipOwnerCode) {
			  this.boatMianData.forEach(v => {
				  if (v.id == this.form.shipOwnerCode) {
					  this.form.shipOwner = v.fullName
				  }
			  })
		  } else {
			  this.form.shipOwner = ''
		  }

		  // 传递的参数等待确认
		  delete this.form.createBy
		  delete this.form.createName
		  delete this.form.createTime
		  delete this.form.updateBy
		  delete this.form.updateName
		  delete this.form.updateTime
		  delete this.form.delFlag
		  delete this.form.shipNationName
		  delete this.form.navigatingName
		  delete this.form.index
		  // this.form.buildDate = new Date(this.form.buildDate)
		  // flag为真进行添加操作
		  console.log(this.form)
		  this.$refs['basisRulesRef'].validate(async valid => {
			  if (valid) {
				  if (this.flag) {
					  delete this.form.id
					  await this.$http.post(
							  '/${this.$ServiceName}/api/external/mtbargeInfo/add',
							  this.form
					  ).then(res => {
						  this.drawer = false
						  this.$message.success(res.data.msg)
						  this.getListData()
					  }).catch(error => {})
				  } else {
					  // 进行修改操作elseRules
					  delete this.form.shipKindName
					  // this.form.buildDate = new Date(this.form.buildDate)
					  if (this.form.hsReviewStatus === '0') this.form.hsReviewStatus = '1'
					  await this.$http.put(
							  '/${this.$ServiceName}/api/external/mtbargeInfo/updatebyid',
							  this.form
					  ).then(res => {
						  this.drawer = false
						  this.$message.success(res.data.msg)
						  this.getListData()
					  }).catch(error => {})
				  }
			  } else {
				  return false
			  }
		  })
	  },
	   async addUpdate() {
    	if (this.form.nameCn) {
        if (this.namecnId) { var namecnId = this.namecnId } else { var namecnId = '' }
        const resb = await this.$http.get(
          `/${this.$ServiceName}/api/external/mtbargeInfo/${this.$version}/checkbargename?nameCn=${this.form.nameCn}&id=${namecnId}`
        )
        if (resb.data.data) {
          var flag = []
          var arr = []
          resb.data.data.map(item => {
            arr.push(item.nameCn)
          })
          flag = resb.data.data
          this.responseNameb = arr
        } else {
          this.responseNameb = ''
        }
        if (this.responseNameb) {
          if (flag[0].flag) {
            this.$message.error('存在重复船名！')
            return
          }
          this.$confirm(`存在类似中文船名:${this.responseNameb},是否继续保存?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.addUpdateNew()
            this.responseNameb = ''
          }).catch(() => {
          });
        } else {
          this.addUpdateNew()
          this.responseNameb = ''
        }
      } else {
        this.addUpdateNew()
        this.responseNameb = ''
      }
    },
    // 修改
    handleEdit(index, row) {
	  this.namecnId = row.id
      this.form = JSON.parse(JSON.stringify(row))
      // console.log(this.form.buildDate)
      this.drawer = true
      this.flag = false
      // this.colpo = true
      // this.colpopo = false
      this.$nextTick(() => {
        this.$refs.basisRulesRef.clearValidate();
      })
      this.aciveName = 'first'
    },

    // // 删除确认
    // async subDelete(id) {
    //   const res = await this.$http.delete(
    //     `/${this.$ServiceName}/api/external/mtbargeInfo/deletebyid?id=${id}`
    //   )
    //   if (res.data.code != '0000') {
    //     return this.$message.error(res.data.msg)
    //   }
    //   this.$message.success(res.data.msg)
    //   this.startpage = 1
    //   this.getListData()
    // },
    // 取消所有
    cancel() {
      if (this.editmod) {
        this.editmod = false
      }
      if (this.drawer) {
        this.drawer = false
      }
      if (this.relation) {
        this.relation = false
      }
      this.$message('已取消！')
    },
    add() {
      this.flag = true
      this.drawer = true
      this.aciveName = 'first'
      this.form = {
        nameCn: '',
        shortCode: '',
        callNo: '',
        captainPhone: '',
        shipCompany: '',
        shipCompanyCode: '',
        shipOwner: '',
        shipOwnerCode: '',
        netTon: '',
        weightTon: '',
        deadWeight: '',
        totalTon: '',
        buildDate: '',
        shipNationCode: '',
        hatchNo: '',
        cabinNum: '',
        shipLength: '',
        shipHeight: '',
        shipWidth: '',
        topSpeed: '',
        shipSpeed: '',
        mouldedDepth: '',
        mouldedHeight: '',
        fullloadWater: '',
        unloadedDraft: '',
        delFlag: '0',
        remark: '',
        fullyLoadedWaterlineLength: '',
        maximumShipWidth: '',
        maximumShipHeight: '',
        fullLoadDisplacement: '',
        noLoadDisplacement: '',
        isHs: '',
        hsReviewStatus: ''
      }
      this.$nextTick(() => {
        this.$refs.basisRulesRef.resetFields()
      })
    },
    // 每页显示的条数
    handleSizeChange(val) {
      this.pagesize = val
      this.getListData()
    },
    // 当前页
    handleCurrentChange(val) {
      this.startpage = val
      this.getListData()
    }
    // 删除提示
    // async handleDelete(id) {
    //   const confirmRes = await this.$confirm(
    //     '此操作将永久删除该数据, 是否继续?',
    //     '提示',
    //     {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }
    //   ).catch(err => {})
    //   if (confirmRes !== 'confirm') {
    //     return this.$message.info('已经取消删除')
    //   }
    //   this.subDelete(id)
    // }
  }
}
</script>
<style scoped>
/* .el-drawer__open .el-drawer.rtl {
	  width: 55% !important;
	} */
</style>
<style lang="less" scoped>
/deep/.el-tabs__nav-scroll {
  margin: 0 20px;
}

.btn /deep/ .el-button--mini,
.el-button--mini.is-round {
  padding: 7px;
}

/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}

.page {
  background: #ffffff;
  border-radius: 4px 4px 0 0;
}

.headerspan {
  background: #ffffff;
  border-bottom: 1px solid #e1e4eb;
  line-height: 40px;
  padding-left: 1rem;
}

.headerspan-item {
  line-height: 40px;
  padding-left: 1rem;
  font-size: 14px;
  color: #606266;
  letter-spacing: 0;
}

// .form-t /deep/ .el-form-item__content {
//   margin-left: 1rem !important;
// }
.box {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 4px 4px 0 0;
  border-top: none;
}

.title {
  background: #f5f7fa;
  height: 40px;
  line-height: 40px;

  p {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    padding-left: 14px;
    line-height: 40px;
  }
}

/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}

/deep/ .demo-drawer__footer {
  text-align: right;
  padding-right: 1rem;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
}

/deep/ .el-table .cell {
  white-space: nowrap;
}

/deep/ .el-form-item--mini .el-form-item__label {
  line-height: 0;
}

/deep/ .el-pagination {
  text-align: right;
  padding: 10px 5px;
}

/deep/ .el-table th > .cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
}

/deep/ .el-table .el-button:focus,
.el-table .el-button:hover {
  background-color: #fff;
  border: 1px solid #e1e4eb;
}

/deep/ .el-table .el-button--mini {
  border-color: transparent;
  background: transparent;
  color: #606266 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 85px !important;
}

/deep/ .el-table th {
  border-left: 1px solid #ebeef5;
}

/deep/ .el-table th:nth-child(1) {
  border-left: none;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5f7fa;
}

/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}

/deep/ .el-button + .el-button {
  margin-left: 3px;
}

/deep/ .el-drawer__open .el-drawer.rtl {
  background: #f5f7fa;
}

.selectBox {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-bottom: 0;
  border-left: none;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 14px;
}
 /deep/ .el-drawer__open .el-drawer.rtl {
  // width: 55% !important;
}

/deep/ .el-drawer__body {
  overflow-y: auto;
  padding-bottom: 50px;
}

.formt-itm {
  border-bottom: 1px solid gainsboro;
  margin-bottom: 4px;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0;
  font-family: MicrosoftYaHei;
  font-size: 14px;
  color: #303133;
  line-height: 40px;

  i {
    color: #909399;
  }
}

</style>
<style>
	.el-message-box__message{
		word-wrap:break-word!important;
		max-height: 100px;
		overflow: auto;
	}
</style>
